﻿@page "/scheduler/default-functionalities"

@using Syncfusion.Blazor.Schedule
@using Syncfusion.Blazor.Calendars 
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This demo showcases how the flat Scheduler looks with its default set of minimal configurations. Here, some of the documentary shows are displayed as events parallel to its relevant telecast timings. The show names are given as event's subject and simply notified the start and end of it. </p>
</SampleDescription>
<ActionDescription>
 <p>The Scheduler a.k.a. event calendar facilitates almost all the calendar features, thus allowing users to manage their time efficiently. It features easy resource scheduling, appointments rescheduling through
     editor pop-ups, drag and drop, and a resizing action. It includes wide variety of view modes with unique configuration options for each view. The available view modes are listed below, out of which the <code>Week</code> view is set as active. </p>
<ul>
    <li>Day</li>
    <li>Week</li>
    <li>Work Week</li>
    <li>Month</li>
    <li>Agenda</li>
    <li>Month Agenda</li>
    <li>Timeline Day</li>
    <li>Timeline Week</li>
    <li>Timeline Work Week</li>
    <li>Timeline Month</li>
    <li>Timeline Year</li>
    <li>Year</li>
 </ul>
    <p>To navigate between views and dates, the navigation options are available at the Scheduler header bar and the active view option is highlighted by default. The date range of the active view will also be displayed in the header bar, clicking on which will open a calendar popup for ease of desired date selection. </p>
    <p><strong>Touch actions on Mobile mode</strong> </p>
        <table style="width:100%">
            <tr>
                <th style="width:100px"><strong>Action</strong>  </th>
                <th> <strong>Description</strong>  </th>
            </tr>
            <tr>
                <td style="vertical-align: top;padding:4px 0">Single Tap</td>
                <td><ol style="padding-left:12px;">
                    <li>Single tapping on events, opens the popup showing event information</li>
                    <li>Single tapping on cells, will display a “+” icon on the cell. Again tapping on it will open the new event editor. </li>
                 </ol>
                </td>
             </tr>
             <tr>
                <td style="vertical-align: top;padding: 4px 0;">Tap hold </td>
                <td><ol style="padding-left:12px;">
                    <li>Tap holding on cells, opens the new event editor. </li>
                    <li>Tap holding on events, opens a small popup at the top holding the options to edit or delete and also displays the selected event's subject. As a continuation of this action, if user keeps on single tapping on other events, it will allow the multiple event selection. Also, the previous popup remains in opened state, showing the count of the number of events selected. </li>
                    <li>Tap hold the event and try moving it over the Scheduler to enable drag and drop action. </li>
                  </ol>
                </td>
            </tr>
        </table>  
</ActionDescription>

<div class="col-lg-9 control-section">
    <div class="schedule-wrapper">
        <SfSchedule TValue="ScheduleData.AppointmentData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate">
            <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
            <ScheduleViews>
                <ScheduleView Option="View.Day"></ScheduleView>
                <ScheduleView Option="View.Week"></ScheduleView>
                <ScheduleView Option="View.WorkWeek"></ScheduleView>
                <ScheduleView Option="View.Month"></ScheduleView>
                <ScheduleView Option="View.Agenda"></ScheduleView>
            </ScheduleViews>
        </SfSchedule>
    </div>
</div>
<div class="col-lg-3 property-section">
    <div class="property-panel-header">Properties</div>
    <div class="property-panel-content">
        <table id='property' title='Properties' class='property-panel-table' style="width: 100%;">
            <tbody>
                <tr style="height: 50px">
                    <td style="width: 30%">
                        <div>
                            Current Date
                        </div>
                    </td>
                    <td style="width: 70%;">
                        <div>
                            <SfDatePicker TValue="DateTime" Width="100%" @bind-Value="@CurrentDate" ShowClearButton="false"></SfDatePicker>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

@code{
    public DateTime CurrentDate = new DateTime(2020, 1, 9);
    public List<ScheduleData.AppointmentData> DataSource = new ScheduleData().GetScheduleData();
}